<template>
	<view class="list">
		<view :class="[item.is_readed==true?'row':'row-readed']" v-for="(item,i) in msgs" :key="i">
			<text>{{item.content}}</text>
			<button type="default" @tap="toDetail(i)">详情</button>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {  
			...mapState(['msgs','count'])  
		}, 		
		data() {
			return {
				test:true
			}
		},
		onLoad() {
	
		},
		methods: {
			...mapMutations(['minusCount','setIsReaded']),			
			toDetail(index){
				this.minusCount();
				this.setIsReaded(index);
				uni.setTabBarBadge({
				  index: 2,
				  text: this.count.toString()
				})	
				uni.navigateTo({
					url:"msg-detail/msg-detail?msg="+this.msgs[index].content
				})
			}
		}
	}
</script>

<style scoped>

	.list{
		width: 100%;
		margin: 5% 0 0 0;
	}
	.list view{
		margin-top: 4%;
		padding: 2%;
		width: 100%;
		height: 40px;
		color: red;
		display: flex;
	}
	.row{
		background: rgba(160, 160, 160, 0.3);
	}
		
	.row-readed{
		background: rgba(230, 230, 230, 0.3);
	}
	.list view text{
		width: 60%;
		white-space: nowrap;/*内容超宽后禁止换行显示*/
		overflow: hidden;/*超出部分隐藏*/
		text-overflow:ellipsis;/*文字超出部分以省略号显示*/
	}
	.list view button{
		background: #5476fe;
		width: 20%;
		padding-bottom: 3%;
		font-size: 18px;
		color: #FFFFFF;
	}
</style>
